import React, { useState, useEffect } from 'react';
import { Card, Table, Button, Modal, Input, InputNumber, message } from 'antd';
import styles from './index.less';
import api from '@/api';

const Proportion = (props: any) => {
  const [tabLoading, setTabLoading] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState<any>([]);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [isModalVisibleAdd, setIsModalVisibleAdd] = useState<boolean>(false);
  const [row, setRow] = useState<any>({});
  const [formData, setFormData] = useState<any>({});
  const columns: any = [
    {
      title: '分红区间',
      render: (row: any) => {
        return (
          <span>
            {row.minCapacity} - {row.maxCapacity}T
          </span>
        );
      },
    },
    {
      title: '比例',
      key: 'proportion',
      dataIndex: 'proportion',
    },
    {
      title: '操作',
      render: (row: any) => {
        return (
          <Button
            type="primary"
            onClick={() => {
              setRow(row);
              setIsModalVisible(true);
            }}
          >
            修改当前比例
          </Button>
        );
      },
    },
  ];
  useEffect(() => {
    fetchData();
  }, []);
  // 获取列表接口
  const fetchData = () => {
    if (tabLoading) return;
    setTabLoading(true);
    api.note
      .server_notes_list()
      .then(res => {
        setDataSource(res.notesSettingsList);
      })
      .finally(() => {
        setTabLoading(false);
      });
  };

  const handleChange = (type: string, value: any) => {
    const newFormData = { ...formData };
    newFormData[type] = value;
    setFormData(newFormData);
  };
  const confirmAdd = () => {
    if (loading) return;
    if (
      formData.minCapacity === '' ||
      formData.maxCapacity === '' ||
      formData.proportion === '' ||
      formData.minCapacity === undefined ||
      formData.maxCapacity === undefined ||
      formData.proportion === undefined ||
      formData.minCapacity === null ||
      formData.maxCapacity === null ||
      formData.proportion === null
    ) {
      return message.error('请将必填项填写完整再提交');
    }
    setLoading(true);
    api.note
      .server_notes_add({
        ...formData,
      })
      .then(() => {
        message.success('添加成功');
        fetchData();
      })
      .finally(() => {
        setLoading(false);
        setIsModalVisibleAdd(false);
      });
  };

  const confirm = () => {
    if (loading) return;
    setLoading(true);
    api.note
      .server_notes_update({
        id: row.id,
        proportion: row.proportion,
      })
      .then(() => {
        message.success('修改成功');
        fetchData();
      })
      .finally(() => {
        setIsModalVisible(false);
        setLoading(false);
      });
  };
  return (
    <div>
      <div className={styles.title}>{props.route.title}</div>
      <Card bordered={false}>
        <Button
          type="primary"
          className={styles.addBtn}
          onClick={() => setIsModalVisibleAdd(true)}
        >
          新增级差奖励
        </Button>
        <Table
          rowKey="id"
          loading={tabLoading}
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
        <Modal
          title="新增级差奖励"
          visible={isModalVisibleAdd}
          destroyOnClose={true}
          onOk={() => {
            confirmAdd();
          }}
          width={450}
          confirmLoading={loading}
          onCancel={() => {
            setIsModalVisibleAdd(false);
            setRow({});
          }}
        >
          <div className={styles.rowItem}>
            <div className={styles.rowLabel}>分红区间:</div>
            <InputNumber
              className={styles.formItem2}
              value={formData.minCapacity}
              min={0}
              onChange={(e: any) => handleChange('minCapacity', e)}
              placeholder="必填"
            ></InputNumber>
            <span style={{ marginRight: 10 }}>~</span>
            <InputNumber
              className={styles.formItem2}
              value={formData.maxCapacity}
              min={formData.minCapacity}
              onChange={(e: any) => handleChange('maxCapacity', e)}
              placeholder="必填"
            ></InputNumber>
          </div>
          <div className={styles.rowItem}>
            <div className={styles.rowLabel}>比例:</div>
            <InputNumber
              className={styles.formItem}
              value={formData.proportion}
              min={0}
              max={1}
              onChange={(e: any) => handleChange('proportion', e)}
              placeholder="必填"
            ></InputNumber>
          </div>
        </Modal>
        <Modal
          title="修改比例"
          visible={isModalVisible}
          destroyOnClose={true}
          onOk={() => {
            confirm();
          }}
          width={450}
          confirmLoading={loading}
          onCancel={() => {
            setIsModalVisible(false);
            setRow({});
          }}
        >
          <div className={styles.rowItem}>
            <div className={styles.rowLabel}>用户Id：</div>
            <Input className={styles.formItem} value={row.id} disabled></Input>
          </div>
          <div className={styles.rowItem}>
            <div className={styles.rowLabel}>比例:</div>
            <InputNumber
              className={styles.formItem}
              value={row.proportion}
              min={0}
              max={1}
              onChange={(e: any) => {
                setRow({
                  ...row,
                  proportion: e,
                });
              }}
              placeholder="请输入"
            ></InputNumber>
          </div>
        </Modal>
      </Card>
    </div>
  );
};

export default Proportion;
